:root {
	--headlines: #000000;
	--accent: #2C3079;
	--accent-dark: #2C3079;
	--tint: #E1E8F0;
	--extra-accent: #BB3D81;
	--button-accent: #BB3D81;
	--button-secondary-accent: #BB3D81;
	--button-secondary-text: #fff;
	--extra-theme: #719BD2;
}

.brand2 {
	--headlines: #007CB6;
	--accent: #006C36;
	--accent-dark: #00472B;
	--tint: #EBEBEB;
	--extra-accent: #69B341;
	--button-accent: #006C36;
	--button-secondary-accent: #C4E6E2;
	--button-secondary-text: #007CB6;
	--extra-theme: #69B341;
}

html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: #111;
	font: 13pt/160% "museo-sans", Arial, Helvetica, sans-serif;
	font-weight: 300;

}

img {
	display: inline-block;
	width: 100%;
}

body > header {
	padding: .75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body > header a {
	color: inherit;
	transition: color .15s ease;
}
body > header a:hover {
	color: rgb(235,130,50);
}
body > header > img {
	height: 6rem;
	width: auto;
}
.brand1 body > header > img {
	box-sizing: border-box;
	padding-block: .5rem;
}


body > figure {
	margin: 0;
	display: grid;
	grid-template-columns: 3fr 6fr;
	/* grid-template-rows: 1fr; */
	grid-template-rows: auto 1fr;
	gap: 1.5rem;
}
body > figure > img {
	grid-column: 1/-1;
	grid-row: 1/-1;
	width: 100%;
	height: auto;
	aspect-ratio: 19/7;
	object-fit: cover;
}
@media (max-width: 900px) {
	body > figure > img {
		aspect-ratio: 5/3;
	}
}
@media (max-width: 600px) {
	body > figure > img {
		aspect-ratio: 1/1;
	}
}
body > figure > figcaption {
	grid-column: 2/-1;
	grid-row: 1/-1;
	align-self: end;
	justify-self: end;
	margin: 0 1.5rem 3rem 0;
	padding: 1.5rem;
	background: var(--accent);
	color: var(--extra-theme);
	font-size: 1.5rem;
}
	body > figure > figcaption strong {
		display: block;
		color: #fff;
		font-size: 1.25em;
		max-width: 18ch
	}
body > figure > a {
	/* grid-column: 1/2;
	grid-row: 1/-1;
	align-self: start;
	margin-left: 1.5rem; */
	grid-column: 2/3;
	grid-row: 1/2;
	justify-self: end;
	margin-right: 1.5rem;

	color: #fff;
	width: 6rem;
	position: relative;
	text-align: center;
	font-size: .7rem;
	/* text-transform: uppercase; */
	/* line-height: 110%; */
	background: var(--extra-accent);
}
body > figure > a img {
	display: block;
	width: 40%;
	height: auto;
	margin: .5rem auto .2rem;
}
body > figure > a::after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: var(--extra-accent);
	border-width: 1rem 3rem 0 3rem;
	margin-left: -3rem;
	}


/* main */

body > main {
	flex-grow: 1;
}
body > main > section,
body > footer {
	padding: 10vh 1.5rem;
}



/* footer */

body > footer {
	padding-top: 6vh;
	padding-bottom: 6vh;
}
body > footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 500;
}
body > footer h4 {
	margin: 0;
	padding: 0;
}
@media screen and (min-width: 700px) {
	body > footer {
		display: flex;
		justify-content: space-between;	
		flex-wrap: wrap;
	}
	body > footer ul {
		column-count: 2;
		column-gap: 3rem;
	}
}

body > footer > address img {
	display: block;
	width: 100%;
	max-width: 10rem;
	height: auto;
}
body > footer > .birdseed {
	flex-basis: 100%;
	text-align: center;
	padding: 3rem 0 0;
	font-size: .8em;
}




/* logo */
/* 
img.logo {
	height: 5rem;
	vertical-align: middle;
	padding: 1.0rem 0;
}
@media (max-width: 600px) {
	img.logo {
		height: 3.5rem;
	}
} */









@media screen and (min-width: 1200px) {
	body > * {
		box-sizing: border-box;
		width: 100vw;
		border-left: calc((100vw - 1200px) / 2) solid transparent;
		border-right: calc((100vw - 1200px) / 2) solid transparent;
	}
	.full {
		/* position: relative; */
		box-sizing: border-box;
		width: 100vw;
		left: calc((100vw - 1200px) / -2);
		border-left: calc((100vw - 1200px) / 2) solid transparent;
		border-right: calc((100vw - 1200px) / 2) solid transparent;
	}
	main > .full {
		position: relative;
	}
}
















footer, .reverse {
	background: var(--accent-dark);
	color: #fff;
}
.tint {
	background-color: var(--tint);
}

.status-1 { /* Coming Soon */
	background: cornflowerblue;
}
.status-2 { /* Availabe Now */
	background: rgb(26, 176, 26);
}
.status-3 { /* Almost Sold Out */
	background: rgb(235, 130, 50);
}
.status-4 { /* Sold Out */
	background: rgba(255, 0, 0, 0.87);
}





footer {
	font-size: 85%;
	line-height: 160%;
	/* background: #b2b1ab; */
	color: #fff;
}

footer h3 {
	color: inherit;
}
footer a {
	color: inherit;
}
footer a:hover {
	text-decoration: underline;
}


address {
	font-style: normal;
}


body > nav {
	color: #fff;
	background: var(--accent);
	font-weight: 500;
}
body > nav a {
	color: inherit;
}
body > nav ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0 1.5rem;
	padding: 0;
	justify-content: space-around;
}
body > nav ul li {
	margin: 0;
	padding: .5em 0;
}

















a {
	text-decoration: none;
}
h1, h2, h3 {
	font-weight: 900;
	margin: 0;
	padding: 0 0 .35em;
	color: var(--headlines);
}
*.reverse h1,
*.reverse h2,
*.reverse h3 {
	color: #fff;
}
h1 {
	font-size: 2rem;
	letter-spacing: -.04em;
	line-height: 115%;
}
h2 {
	font-size: 1.75rem;
	letter-spacing: -.04em;
	line-height: 115%;
	padding-bottom: 1em;
}
h3 {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	/* font-weight: 700; */
}
p {
	margin: 0;
	padding: 0 0 .35em;
}

header {
	letter-spacing: .025em;
	font-size: .9rem;
	font-weight: 400;
}

a {
	color: rgb(10, 82, 212);
	color: green;
}
b {
	font-weight: 500;
}




	

@media screen and (min-width: 700px) {
	.half {
		display: grid;
		grid-gap: 3rem;
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 799px) {
	.thirds > * + * {
		margin-top: 3rem;
	}
}

@media screen and (min-width: 800px) {
	.thirds {
		display: grid;
		grid-gap: 3rem;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.thirds > * {
		position: relative;
	}
	.thirds > *:after {
		content: '';
		position: absolute;
		border-left: 1px solid #0001;
		right: -1.5rem;
		height: 100%;
		top: 0;
	}
	.thirds > *:last-child:after {
		display: none; /* Hide the divider for the last block */
	}
}





img.max {
	display: block;
	width: 100%;
}

img.extra {
	/* border-radius: .5rem; */
	box-shadow: 0 1em 1em -.5em #0004;
	margin-bottom: 1.5rem;
}



a.button {
	letter-spacing: .025em;
	/* font-size: .9rem; */
	font-weight: 500;
	display: inline-block;
	color: #fff;
	background: var(--button-accent);
	/* border: 1px solid #333; */
	border-radius: 6px;
	padding: .25em 1em;
}
a.button.button-secondary {
	background: var(--button-secondary-accent);
	color: var(--button-secondary-text);
}














details {
	margin: 0 0 1.5px;
	padding: 0;
	background-color: #fff;
}
details summary::-webkit-details-marker,
details summary::marker {
	display: none; 
	content: "";
}
details summary {
	margin: 0;
	font-size: 1.25rem;
	padding: .75rem 1.5rem;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
}
details summary::after {
	content: url(/@img/down.svg);
	transform: rotate(0deg);
	transition: transform .25s ease-in-out;
	display: inline-block;
	height: auto;
	width: 1rem;
	margin: 0;
	padding: 0;
	line-height: 1;
}
details[open] summary::after {
	transform: rotate(180deg);
}
details > :not(summary) {
	opacity: 0;
	transition: all .5s;
}
details[open] > :not(summary) {
	opacity: 1;
	padding: 1.5rem;
}

* > details:first-of-type {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	overflow-x: hidden;
	margin-top: 1rem;
}
* > details:last-of-type {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	overflow-x: hidden;
}







.autocolumns {
	column-count: 2;
	column-gap: 1.5rem;
}

.autocolumns > * {
	break-inside: avoid-column;
}












.sixtyfourty, .halfhalf {
	display: grid;
	gap: 3rem;
}

@media (min-width: 900px) {
	.sixtyfourty {
		grid-template-columns: 60% 1fr;
	}
	.halfhalf {
		grid-template-columns: 1fr 1fr;
	}
}









.centered {
	text-align: center;
}
.clamped > * {
	max-width: 50rem;
	margin: auto;
}
.bigger {
	font-size: 1.25em;
	line-height: 160%;
}









/* mobile/desktop nav */
/* breakpoint = 1000px */

@media (max-width: 999px) {
	.mobile {
		display: initial;
	}
	.desktop {
		display: none;
	}
	.mobile.navvy {
		margin-left: auto;
		overflow: hidden;
		text-indent: -99999rem;
		background: transparent url(/@svg/hamburger.svg) 50% 50% / contain;
		background: transparent url(/@svg/hamburger.svg) no-repeat 50% 50% / contain;
		height: 1rem;
		width: 1rem;
	}
	.mobile.unnavvy {
		position: fixed;
		top: 0;
		right: 0;
		padding: 1.9rem 1.5rem 0 0 !important;
		font-weight: 800;
		font-size: 1.25rem;
	}

	body > nav#navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		margin: 0;
		padding: .75rem 1.5rem;
		list-style: none;
		flex-direction: column;
		background: rgba(255,255,255,.8);
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		z-index: 99999999999;
		transform: translateY(-100%);
		/* transition: transform 0s ease-in-out .5s, opacity .25s ease-in-out .25s; */
		box-sizing: border-box;
		opacity: 0;
	}
	body > nav#navigation:target {
		/* transition: transform 0s ease-in-out, opacity .25s ease-in-out; */
		transform: translateY(0);
		opacity: 1;
	}


	body > nav#navigation > * {
		color: #000;
		
		/* transition-delay: 0; */
	}
	body > nav#navigation:target * {
		/* transition-delay: .25s; */
		opacity: 1;
	}


	/* close button */
	body > nav#navigation > a[href="#"] {
		display: flex;
		height: 5.5rem;
		align-items: center;
		justify-content: end;
		/* text-transform: uppercase; */
		letter-spacing: .025em;
		font-size: .9rem;
	}


	body > nav#navigation ul {
		margin: 0;
		padding: 0 0 0 0;
		/* font-size: .85em; */
		flex-direction: column;
		align-items: center;
		gap: .25rem;
		transition: opacity .75s ease-in-out;
		opacity: 0;
	}
	body > nav#navigation:target ul {
		opacity: 1;
	}
	body > nav#navigation > li {
		padding: 0;
		margin: 0;
	}



}
@media (min-width: 1000px) {
	.mobile {
		display: none;
	}
	.desktop {
		display: initial;
	}

	header > ul {
		flex-grow: 1;
		list-style: none;
		display: flex;
		justify-content: flex-end;
	}
	header > ul li { /* subnav */
		padding: .5rem .75rem;
		cursor: pointer;
	}
	header > ul li ul { /* subnav */
		position: absolute;
		display: none;
		list-style: none;
		margin: 0 0 0 -.75rem;
		padding: 1em 0 .5em 0;
		background: #fff;
		box-shadow: 0 1rem 1rem -.5rem #0003;
		font-size: .85em;
		z-index: +1;
		min-width: 25ch;
	}
	header > ul li ul li {
		padding: .25rem .75rem;
	}
	header > ul li:hover ul {
		display: block;
	}
	
}












/* animations */

@keyframes up-in {
	0%	{
		opacity: 0;
		transform: translateY(100%);
		}
	100%{
		opacity: 1;
		transform: translateY(0);
		}
	}

@keyframes left-in {
	0%	{
		opacity: 0;
		transform: translateX(3rem);
		}
	100%{
		opacity: 1;
		transform: translateX(0);
		}
	}

@keyframes fade-in {
	0%	{
		opacity: 0;
		}
	100%{
		opacity: 1;
		}
	}



















form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
form {
	padding-top: 1.5rem;
}
form label {
	display: block;
	padding: 0 0 1rem 0;
}
form label > input, form label > textarea {
	display: block;
	width: 100%;
	font: inherit;
	padding: .5em;
	border: 1px solid #C5E7E3;
	border-radius: 6px;
	box-sizing: border-box;
}
form label > textarea {
	height: 14.05rem;
}
form input[type="submit"] {
	letter-spacing: .025em;
	font: inherit;
	font-weight: 500;
	display: inline-block;
	color: #fff;
	background: var(--button-accent);
	border: none;
	border-radius: 6px;
	padding: .25em 1em;
}
@media (min-width: 800px) {
	form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}




img.navctrl {
	display: inline-block;
	height: 1rem;
	width: auto;
}

.form-hp1, .form-hp1 input {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}